<template>
  <el-upload :accept="fileType.join(',')"
             :action="serverUpload ? uploadUrl : uploadData.actionUrl"
             :before-upload="beforeImageUpload"
             :data="serverUpload ? {} : uploadData.requestData"
             :disabled="disabled || percentageShow"
             :drag="false"
             :headers="serverUpload ? uploadHeaders : {}"
             :multiple="false"
             :name="fileName"
             :on-error="handleUploadError"
             :on-progress="handleUploadProgress"
             :on-success="handleUploadSuccess"
             :show-file-list="false">
    <el-button class="upload-btn">
      <SvgIcon icon="upload-outlined" style="margin-right: 5px"/>
      {{ buttonText }}
    </el-button>
  </el-upload>
</template>

<script lang="ts" setup>
import { computed, PropType, ref, watchEffect } from 'vue';
import { getRequestUrl } from '@/utils/axios/axios-service.ts';
import { getToken, getTokenHeader } from '@/utils/auth.ts';
import useUpload from '@/components/upload/src/use-upload.ts';
import { UploadFile } from 'element-plus/es/components/upload/src/upload';
import { SvgIcon } from '@/components/icon';

defineOptions({name: 'UploadButton'})

const props = defineProps({
  modelValue: {
    type: String,
  },
  // 是否禁用上传组件
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否显示提示信息
  showTip: {
    type: Boolean,
    default: true
  },
  // 大小限制(MB)
  fileSize: {
    type: Number,
    default: 10
  },
  // 文件类型
  fileType: {
    type: Array as PropType<string[]>,
    default: () => ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/bmp']
  },
  // 是否显示删除按钮
  showDelete: {
    type: Boolean,
    default: false
  },
  fileName: {
    type: String,
    default: 'file'
  },
  // 是否服务端上传
  serverUpload: {
    type: Boolean,
    default: false
  },
  // 图标保存到七牛云的路径
  uploadPath: {
    type: String,
    default: 'uploads'
  },
  // 是否重命名图片名称
  rename: {
    type: Boolean,
    default: true
  },
  buttonText: {
    type: String,
    default: '图片上传'
  },
})
// 服务端上传地址
const uploadUrl = ref(getRequestUrl('/sys/oss/upload'));
// 服务端上传头部
const uploadHeaders = computed(() => {
  let headers = {};
  let header = getTokenHeader();
  if (header) {
    headers[header] = getToken();
  }
  return headers;
});

const emit = defineEmits(['update:modelValue', 'change']);

const {
  uploadData, uploadOptions, percentage, percentageShow, percentageColors,
  beforeImageUpload, beforeFileUpload, handleUploadSuccess, handleUploadError, handleUploadProgress
} = useUpload([], (url: string, file?: UploadFile) => {
  // 上传成功回调
  emit('update:modelValue', url);
  emit('change', url);
});

// watchEffect监听
watchEffect(() => {
  uploadOptions.limit = 1;
  uploadOptions.fileSize = props.fileSize;
  uploadOptions.fileTypes = props.fileType;
  uploadOptions.uploadPath = props.uploadPath;
  uploadOptions.rename = props.rename;
  uploadOptions.serverUpload = props.serverUpload;
});

</script>

<style lang="scss" scoped>

</style>
